<template>
    <div class="mobile-applications">
        <header>
            <span></span>
            <h2>移动应用推广案例</h2>
        </header>
        <div class="image">
            <img src="../../../assets/img/mobile-applications.png" alt="">
        </div>
        <div class="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../../assets/img/gaode.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../../assets/img/jiupinhui.png" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
export default {
    name: 'MobileApplications',
    data () {
        return {

        }
    },
    mounted(){
        new Swiper ('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
            effect : 'flip',
            loop: true,
            speed: 500,
            autoplay: {
                delay: 5000
            }
        })        
    }
}
</script>
<style scoped>
.mobile-applications {
    margin-top: 100px;
}
.mobile-applications header {
    text-align: center;
}
.mobile-applications header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.mobile-applications header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.mobile-applications .image {
    width: 689px;
    height: 738px;
    margin: 80px auto 0;
}
.mobile-applications .image img {
    width: 100%;
    height: auto;
}
.mobile-applications .swiper {
    position: relative;
    margin: 80px auto 0;
    width: 670px;
}
.mobile-applications .swiper .swiper-container {
    width:534px;
}
.mobile-applications .swiper .swiper-container .swiper-slide  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
</style>
